import { Component, Input, ElementRef, SimpleChanges } from '@angular/core';

@Component({
	selector: 'ogl-html-embed',
	//template: `<iframe></iframe>`
	template: '<div [innerHTML]="realContent" (click)="handleClick($event)" [class.paragraphs]="paragraphs"></div>'
})
export default class HtmlEmbed {
	@Input() content: string;
	private realContent: string;
	@Input() linkBack: LinkBacks;
	@Input() focus: string;
	@Input() paragraphs: boolean;
	constructor(private element: ElementRef) {
	}

	ngOnChanges(changes: SimpleChanges) {
		console.log(this.paragraphs, "paragraphs");
		if("content" in changes) {
			let dom = new DOMParser().parseFromString(changes.content.currentValue, "text/html");
			if(this.focus) {
				let mainFocus = this.focus;
				let ind = this.focus.indexOf("#");
				let focusRange;
				let focusRangeStr = this.focus;
				if(ind > -1) {
					mainFocus = this.focus.substring(ind+1);
					focusRangeStr = this.focus.substring(0, ind);
				}
				let spl = focusRangeStr.split("-");
				if(spl.length == 1) {
					spl = [spl[0],spl[0]];
				}
				if(ind < 0 && spl.length > 0) {
					mainFocus = "p"+spl[0];
				}
				try {
					focusRange = spl.map((i) => parseInt(i));
				} catch(e) {
					console.error(e);
				}
				var elems = dom.body.getElementsByTagName('p');
				for(let i = 0; i < elems.length; i++) {
					if(focusRange && focusRange.length == 2) {
						let num = parseInt(elems[i].id.substring(1));
						if(num >= focusRange[0] && num <= focusRange[1] && elems[i].id != mainFocus) {
							elems[i].className += " focus";
						}
					}
					console.log(elems[i].id, mainFocus);
					if(elems[i].id.split("_")[0] == mainFocus) {
						elems[i].className += " focus mainFocus";
					}
					if(elems[i].id.indexOf("note") === 0) {
						let label = document.createElement('span');
						label.className = "ref_id";
						label.textContent = elems[i].id.substring(4).split("_")[0];
						elems[i].insertBefore(label, elems[i].firstChild);
					}
				}
			}
			let imgs = dom.body.getElementsByTagName('img');
			for(let i = 0; i < imgs.length; i++) {
				let img = imgs[i];
				let srcs = [];
				for(let key in img.dataset) {
					if(key.indexOf("src") === 0) {
						srcs.push(img.dataset[key]+" "+key.substring(4).split("x")[0]+"w");
					}
				}
				if(srcs.length > 0) {
					img.srcset = srcs.join(",");
				}
			}
			this.realContent = dom.body.innerHTML;
			setTimeout(this.doFocusScroll.bind(this));
		}
	}

	ngOnInit() {
		this.doFocusScroll();
	}

	doFocusScroll() {
		let elems = this.element.nativeElement.getElementsByClassName('mainFocus');
		if(elems.length > 0) {
			elems[elems.length-1].scrollIntoView();
		}
	}

	handleClick(event) {
		console.log(event);
		let target = event.target;
		if(target.className == "study-note-ref") {
			event.preventDefault();
			event.stopPropagation();
			let focus = target.parentNode.firstElementChild.textContent.trim()+target.firstElementChild.textContent;
			this.linkBack.openReferences(focus);
		}
		if(target.href) {
			let ind = target.href.indexOf("gospellibrary://content/");
			if(ind > -1) {
				let uri = target.href.substring(ind+23);
				this.linkBack.openURI(uri);
			}
		}
	}
}

export interface LinkBacks {
	openReferences: (focus: string)=>void;
	openURI: (uri: string)=>void;
}
